<script setup>
import Header from "./components/Header.vue";
import Navigator from "./components/Navigator.vue";
import Content from "./components/Content.vue";
import {ref } from "vue";
let username = ref("admin");

let sonMsg = ref('');
let resiveMsg = (msg) => {
  sonMsg.value = msg;
};
</script>

<template>
  <div>
    {{ sonMsg }}
    <Header :username="username" class="header"></Header>
<!--    接受子组件数据 函数resiveMsg-->
    <Navigator class="navigator" @sendMsg="resiveMsg"></Navigator>
    <Content :sonMsg="sonMsg" class="content"></Content>
  </div>

</template>

<style scoped>
.header {
  height: 80px;
  border: 1px solid red;
}

.navigator {
  width: 15%;
  height: 800px;
  display: inline-block;
  border: 1px blue solid;
  float: left;
}

.content {
  width: 83%;
  height: 800px;
  display: inline-block;
  border: 1px goldenrod solid;
  float: right;
}
</style>
